Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023

Code With Antonio

110K subscribers
<__slot-el>
<__slot-el>
317,951 views Jul 19, 2023 Learn Next & React and get Hired!
Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Website: https://www.codewithantonio.com/proje... Clerk Authentication: https://bit.ly/3pNzsYX In this video, we dive deep into crafting a state-of-the-art AI SaaS Platform with five AI tools. Powered by the Next.js 13 App Router, our platform will not only be efficient but also user-centric. The Next.js 13 App Router is a groundbreaking addition to the Next.js framework, enabling developers to design intricate client-side routing effortlessly. Leveraging this powerful tool, we'll integrate a seamless Stripe subscription system, ensuring a smooth billing process for your users. Beyond the core functionalities, we'll embark on an instructive journey of building our SaaS application using a rich palette of web development technologies like React, Tailwind, Prisma, MySQL, Clerk, and more. Each step is elucidated in detail, ensuring a comprehensive learning experience. Whether you're just stepping into the world of development or have years of experience under your belt, this video is tailored to impart knowledge valuable for all. Ready to master the art of building a 5-tool AI SaaS platform? Grab your coding gear, perhaps a cup of coffee, and let's pioneer the AI-driven web landscape of 2023 with Next.js 13 App Router! Timestamps 00:00 Intro 05:40 Environment Setup 16:32 Folder Setup 25:41 Clerk Authentication 40:01 Sidebar 01:06:29 Dashboard 01:20:08 Conversation AI UI 01:42:10 Conversation AI API (Open AI) 02:08:44 Code Generation AI (Open AI) 02:19:38 Image Generation AI (Open AI) 02:43:03 Music Generation AI (Replicate AI) 02:56:03 Video Generation AI (Replicate AI) 03:03:45 API Limit 03:23:46 API Limit UI Counter 03:40:05 Pro Modal UI 04:04:47 Stripe Integration 04:59:42 Error Handling & Customer Support (Crisp) 05:08:35 Landing Page 05:24:35 Deployment & Wrap Up

Follow along using the transcript.

Code With Antonio

110K subscribers
Show less

1,193 Comments

Hamza Zeidan
Add a comment...
Want to get mentored by me? Apply at https://www.codewithantonio.com/mentorship Hello everyone, thank you for choosing this video. In this tutorial you will learn how to build your own SaaS AI Platform and build 5 different AI tools using models like OpenAI and ReplicateAI. Checkout the description for links and subscribe to the newsletter! ❤
152
Antonio, I must say, you are absolutely incredible! The quality of your content is truly unmatched, and I am genuinely excited for what is yet to come. Congratulations on your outstanding work!
32
A note for anyone following along, the api code for openai has changed a bit since this video was posted, the api has the most differences so far. You need to use: const response = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages}); return NextResponse.json(response.choices[0].message);
85
Amazing, next up will be the 10 hour E-commerce! Love the styling and the amount of details that goes into it. Can't belive this is free
44
Congratulations, Sir Antonio Erdeljac, on your first sponsored video! 🎉 You deserve this recognition for your amazing work as a developer and youtuber. I'm a huge fan of yours and I always watch your videos with great interest and admiration. This AI SaaS video is awesome! I was very excited about the content and the tips you shared. You are an inspiration to me and many other developers. Thank you so much for everything you have done for the community. I wish you much success in your journey and I hope to see more of your videos soon. 🤗Veliki zagrljaj iz Recifea, Brazila! 🇧🇷
67
As a CSE student, I highly commend your quality beginner-friendly tutorials for aiding web programming understanding, so smooth..
6
This is what startups build! I can't thank you enough, it's been a long time looking for complete tutorials like yours, Thank you so much Antonio for this great work! I am learning a lot from your channel so I can go and apply the knowledge to build my own SaaS. Keep up the good work.
8
Quality gets better by the day. I'm really enjoying the teaching approach you've decided to go for in your latest videos. Keep it up, Antonio!
17
Hey this is very awesome stuff. I was wondering if you'd consider doing tutorials on complex applications like codux or figma clones. Tutorials that help us build tools and libraries thus making us understand them even more.
7
As always, Antonio is providing tons of great value for the community, every time you upload something I just know its going to be awesome! Thank you!
5
Man, words can not describe how I am grateful for your contents. Your desire and quality is exceptional, hope to have you always like this in coming years. Remain valuable please ❤
5
love the fact that you're using shadcn -- not only because it looks good, but also because it allows you (and therefore us) to better focus on the core parts of the application instead of writing hundreds of tailwind classes and tens of small components
6
I'm honestly blown away sir. This was my first ever proper project that was deployed and so well done. Your style of guiding us along was amazing and so well put out. Immensely grateful to you and these free top notch tutorials you put out. It took me 5-6 days to complete the project.
Really appreciate your teaching style and how you managed to teach side topics which generally become big issues and beginners have to look out of YouTube windows. I wish you would make an advanced projects that focuses on free tools and gives us detailed idea about Industry level software. Thank you for this one!
9
wow just wow. i appreciate this detailed and step by step tutorial alot. this is one of the first youtube tutorial which i could follow from start to finish. i reckon this took alot of work so i just wanted to thank you so much. you are doing god's work. i had to figure out the gpt-4 version on my own since the update but this was actually quiet fun. you are genuinely the best at explaining, going through it step by step so it's organized and clear. cheers!
Wow!! This is incredible! Thought JS Mastery was the only beast on YouTube, but your style and explanations are incredibly great. Thank you and Please keep it up. More subscribers are on their way.
16
I love you Antonio! You are a very good mentor. Unlike other tutors like JS mastery or PapaReact, you actually take time to explain things.
A quick tip for the Hydration Error at 1:07:30. This error occurs because you've enclosed the button from @/components/ui/button within the SheetTrigger component, which is, in essence, another button. To wrap a button inside a button isn't compliant with HTML syntax, resulting in the error being triggered. One potential solution would be to eliminate the Button component and directly wrap the menu within the SheetTrigger component.
8
Antonio, your work is truly a well-explained and exceptional masterpiece. Please keep going.💻
3
In future I hope you will give us more projects like that🎉 Your all projects are unique and we hope that you will gift us more projects that will help our future journey ❤️❤️❤️ Thank you sir🎉❤
5
Hello Antonio from New York, USA! First I’d like to thank you for the great video tutorials. I completed the Netflix clone last week and really enjoyed it. I’d like to share something with you and everyone about the Shadcn “Sheet” and Button components for the mobile sidebar. I was getting render errors in the browser - server and client renders were not matching and was throwing an error at the <Button> node in the mobile sidebar. The part of the code where the custom buttons are wrapping around the Menu icon from lucid. Turns out that when you use the Sheet component and then wrap like this: <SheetTrigger> <Button …props> <Menu> </Button > </SheetTrigger> It will throw the render error. It looks like SheetTrigger in and of itself IS a button element, so adding the additional Button is an issue. If you just remove the custom button tags and just have the Menu wrapped around the SheetTrigger elements, it will clear that error. Hope that helps someone! Thanks again Antonio!! Lew Savage
12
At 3:56:30, if you are getting this error:- Unhandled Runtime Error Error: Rendered more hooks than during the previous render. Then make sure you have initialized the proModal in the first line of the function as Antonio has done. This is required because we need to initialize the hooks at the top of the function before any JSX return statements.
Amazing tutorial, cant thank you enough for taking the time to provide all this content to the rest of us for free ! it was exciting following along up to the api section where i got totally lost, it will help alot once the repo gets updated
1
OMG, I love you Antonio❤️. I am currently watching one of your videos and I have to pause it to comment this. I recently watched JS Mastery explain the same NextJs Concept but I didn't understand a thing. But barely 20 minutes into your video I feel I can build anything because your explanation is just the best on YouTube. You deserve 100 million subscribers and much more. Thanks for making these video's. I'm looking forward to more from you.❤️❤️❤️❤️❤️❤️
You are among the engineers I can trust
1
finally got this build completed and it worked first time without any problems. once again i thank Antonio for his great tutorial and hard work in producing these tutorials. I am learning lots and am very grateful.
2
Absolutely amazing, i used to do webdev in django but learned react and nextjs just to follow along with your brilliant tutorials
3
Your channel is destined to be the platform for web developer❤
53
This is absolutely amazing. (Good quality 5 nights spent). I've an amazing new idea that is in high demand. As NextJs is very good with fontend, I would love to see a tutorial where you create a whitelabel ai-saas web application with dns management (whatever that is) for client whitelabel purchases. Also include a 3D Secure Stripe payment plan for Europeans with multiple subscription options. A python api ml model integration will be a plus. You won't believe how many people are looking for any single tutorial on one of these but there is none. Thank you for so much for this.
This is absolutely amazing Antonio! I must say, the only thing missing from a startup perspective is to integrate google analytics. This would then be the ultimate starter kit. Will you make a video on that as well?
Can't wait to follow this tutorial!! Thank you for providing these!! Also I'd love to learn about LMS systems like maybe teams Or canvas 🥰
1
Wonderful, I've been doing your tutorials so I can enter the industry. I've learnt so much from you. Thank you, thank you, thank you. Keep the excellent work Antonio! 👏👏👏
3
Thank you for another awesome tutorial, Antonio! You are the one doing an amazing job!
1
This is absolutely amazing. Thank you so much, Antonio!
Amazing tutorial. I loved every minute of it. I can't wait for the next one.
1
thank you very much for this tutorial and especially for the discovery of Clerk which is just incredibly simple compared to Next-auth which requires more work in the configuration of providers! Do not hesitate to use it in your future projects. Thank you for your amazing videos
1
wow another tutorial. what great timing just after i finished the ecommerce one yesterday. but I'm going to rest today and get started with this new one tomorrow or Friday. I am so grateful for all of this high quality tutorials from Antonio. Thankyou sir !
3
I love you, in 2 videos i see i learn more than 10 courses i made in udemy, you are a machine! keep the good works, congratz on your sponsor, now i have to become a member, i really enjoy this channel. And of course, if I can make a suggestion, I would say to build a more "simple" application covering the basics of react, that is to build something using only react and vite for example to help those who still have some difficulties in understanding react basics, if already exists on the channel, I'm sorry, I'm marathoning things here :)
3
Thank you so much for these tutorials. I only got up to 1:30 so far, but I really enjoy these tutorials that are not just "Hello world". On the AI-topic: the most shocking part for me is how much of the tutorial github copilot is able to autocomplete. Some of it was non-working trash, but it made a different, but really nice looking dashboard for me when i just wrote tools.map(. I begin to think we are all going to be unemployed within the next five - ten years.
1
Your videos are such a blast to watch and also very informative. As you'd say "Great, great job!"
2
Thank you, I really whole heartedly admire you. Your projects are awesome and unique that based on real world problem solving.
2
This is incredible! thank you for the in-depth tutorial. Do you think it's possible to simply deploy all of this on a different deployment platform like AWS or GCP instead of Vercel? Vercel's cost don't scale very nicely!
The content you provide is massive. I'm a react engineer and I wanted to advance my skill and here I am
3
Awesome video! Thanks so much. I do have a question for you. I'd like to implement a history so each user can browse their past prompts and responses. I figure it wasn't included due to the different type of storage requirements. How would you, personally, go about implementing such a feature?
This is pure gold, thanks for sharing this amazing content with us.
1
You are wonderful at what you do! First time using Shadcn, Stripe & Clerk and I love it!! So fast!! Thank You
2
I have not gone through the project but Sir, I appreciate your effort. You have empowered me with knowledge. Thank you.
1
You are amazing Antonio Sir ❤ Every single time, you drop an incredible projects 🎉🔥
17
Amazing Sir Antonio, Thanks for this. What are you thinking about for the next project? Can I make a suggestion? It could create a DMS (Document management system), with storage in AWS S3 bucket, with workflow documents, annotations, document check-in/out version control (document), audit trails, security access control, it is a wonderful system for anyone who have a business where you share sensitive documents with your own users
1
Thanks for this great video, i just have a request, it will be great if you use cicd tools such git or docker on your development process, i would love to learn this part too with you
1
Awesome @codewithantonio - Please make more videos for SAAS, its so helpful and we get to learn a lot about building saas from scratch
4
Thank you so much for these wonderful tutorials. It's time to add framer motion 😊
1
This is wow and amazing. My first time watching your video and I'm blown away. Keep it up mate and many thanks for sharing this nugget of gold.
1
You are awesome Antonio. You can't possibly imagine how much you've helped me. Thanks. I'm really grateful.
3
First of all, outstanding project, learned some cool things! I''ll organize my project like this from now on. Two tips: - To import stuff automatically you can press control+space; - Use prettier on save :P Did anyone else had problems with importing lucide icons?
1
Thank you so much Antonio! You're amazing. Can you please share with us your VSCode setup (extensions, settings, etc.)?
2
What an amazing video, learned so much about nextjs 13 and ai models. Thanks Antonio!! I have a question are you aware of a model that enhances the speech (removes background nose etc) from an audio file similar to adobe podcast? I looked everywhere but couldn't find any :(
Thank you, Antoni. I have watched many of your videos, but this video you taught very carefully and in detail. Lots of love! <3
1
I love your videos, Could you make an application with a separate backend from the next 13 app and have role management within the application and language change? thank you so much!!!
I was just doing your twitter tutorial but when I saw this, I stopped and started straight away on making this! it is a dream of mine to make an AI! Thanks for all the amazing work!
4